<template>
  <div class="header">
    <!-- 导航 -->
    <div class="nav_bg">
      <div class="nav max_width">
        <div class="nav_list">
          <div class="logo">
            <img src="../assets/header/logo.png">
          </div>
          <div class="nav_option">
            <div v-for="(item,index) in Nav_list" :key="index" class="nav_option_s" @click="change()">
              {{ item.title }}
            </div>
          </div>
        </div>
        <!-- 导航中的搜索 -->
        <div class="nav_input">
          <input placeholder="请输入内容搜索" type="text" @blur="input_Bure()" @focus="input_Focus()">
          <div class="btn_s">
            <img src="../assets/header/fdj.png">
            搜索
          </div>
        </div>
        <div class="Personal_Center">
          <div class="per_div">
            <div>个人中心</div>
            <div>消息</div>
          </div>
          <div class="sign">
            <div>登录</div>
            <div>注册</div>
          </div>
        </div>
      </div>
    </div>
    <!-- banner -->
    <div class="banner">
      <img src="../assets/header/banner.png">
    </div>
  </div>
</template>
<script>
export default {
  name: 'Headerbg',
  data() {
    return {
      // 导航选项列表
      Nav_list: [
        { title: '首页' }
      ]

    }
  },
  methods: {
    input_Focus() {
      this.search_show = true
    },
    input_Bure() {
      this.search_show = false
    },
    // 返回首页
    change() {
      // 导航选中首页样式
      this.$router.push({ path: '/' })
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  overflow: hidden;
  background: #F1F2F4;
  width: 100%;
  position: relative;
  height: 545px;
  // 导航背景颜色
  .nav_bg {
    width: 100%;
    height: 92px;
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 999;
    border-bottom: 1px #E3E3E3 solid;
  }

  // 导航
  .nav {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nav_list {
      width: 193px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .logo {
        width: 46px;
        height: 52px;
      }

      .nav_option {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .nav_option_s {
          text-align: center;
          font-size: 19px;
          color: #333;
          line-height: 92px;
          width: 100px;
          position: relative;
          cursor: pointer;
        }

        .nav_option_s::before {
          content: "";
          width: 42px;
          height: 0px;
          background: #B7B7B7;;
          border-radius: 2px;
          position: absolute;
          bottom: 22px;
          left: 50%;
          transform: translate(-50%);
        }

        .nav_option_s:hover {
          font-size: 21px;
        }

        .nav_option_s:hover::before {
          height: 6px;
          transition: height 0.3s;
        }
      }
    }
  }

  // 搜索框
  .nav_input {
    width: 544px;
    line-height: 48px;
    display: flex;
    justify-content: flex-end;
    background: #FFFFFF;
    border: 1px solid #0BBED4;
    border-radius: 25px;

    input {
      font-size: 17px;
      width: 415px;
      outline: none;
      border: none;
    }

    input::placeholder {
      font-size: 17px;
      color: #999999;
    }

    .btn_s {
      width: 104px;
      background: #0bbed4;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 25px;
      font-size: 18px;
      cursor: pointer;
      padding: 1px 0;

      img {
        width: 18px;
        height: 18px;
        margin-right: 8px;
      }
    }
  }

  // 个人中心
  .Personal_Center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 280px;

    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .per_div {
      width: 138px;
      color: #333;
      font-size: 19px;

      div {
        cursor: pointer;
      }
    }

    .sign {
      color: #999;
      font-size: 16px;
      width: 83px;

      div {
        cursor: pointer;
      }
    }
  }

  .banner {
    width: 100%;
    margin-top: 100px;

    img {
      width: 100%;
      display: block;
    }
  }

}
</style>
